<template>
  <div class="app-container">
    <eForm ref="form"/>
    <addNewTemplate ref="addNewTemplateForm"/>
    <multiModelGenerator ref="multiModelGenerator"/>
    <!--工具栏-->
    <div class="head-container">
      <el-row :gutter="15">
        <!-- 搜索 -->
        <el-col :span="22">
          <el-input v-model="query.value" clearable placeholder="输入表名搜索" style="width: 200px;" class="filter-item"
                    @keyup.enter.native="toQuery"/>
        </el-col>
        <el-col :span="22">
          <el-select v-model="query.modelType" placeholder="类别" class="filter-item" style="width: 120px">
            <el-option v-for="item in modelTypeOptions" :key="item.key" :label="item.display_name" :value="item.key"/>
          </el-select>
        </el-col>
        <el-col :span="22">
          <div style="float:right">
            <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索
            </el-button>
            <div style="display: inline-block;margin: 0px 2px;">
              <el-button
                v-permission="['admin','exportData:export']"
                :loading="exportDataLoading"
                :disabled="data.length === 0 || this.$refs.table.selection.length === 0"
                class="filter-item"
                size="mini"
                type="danger"
                icon="el-icon-download"
                @click="generatorCode">生成代码
              </el-button>
            </div>
            <div style="display: inline-block;margin: 0px 2px;">
              <el-button
                v-permission="['admin','exportData:export']"
                :loading="configMessageLoading"
                class="filter-item"
                size="mini"
                type="danger"
                @click="setConfigMessage">配置信息
              </el-button>
            </div>
            <div style="display: inline-block;margin: 0px 2px;">
              <el-button
                v-permission="['admin','exportData:export']"
                :loading="configMessageLoading"
                class="filter-item"
                size="mini"
                type="danger"
                @click="addNewTemplate">新增模板
              </el-button>
            </div>
            <div style="display: inline-block;margin: 0px 2px;">
              <el-button
                v-permission="['admin','multiModel:generator']"
                :loading="multiModelGeneratorLoading"
                :disabled="data.length === 0 || this.$refs.table.selection.length  === 0"
                class="filter-item"
                size="mini"
                type="danger"
                @click="doMultiModelGenerator">多表处理
              </el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--表格渲染-->
    <el-table v-loading="loading" ref="table" :data="data" size="small" style="width: 100%;">
      <el-table-column type="selection" width="55"/>
      <el-table-column label="表名" prop="tableName"/>
      <el-table-column label="Engine" prop="engine"/>
      <el-table-column label="备注" align="center" prop="tableComment"/>
      <el-table-column label="创建日期" prop="createTime">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column v-if="this.checkPermission(['admin','',''])" label="操作" width="130px" align="center"
                       fixed="right">
        <template slot-scope="scope">
          <el-button v-permission="['admin','']" size="mini" type="primary" icon="el-icon-download"
                     @click="downloadGeneratorCodeData(scope.row.tableName,query.modelType)"/>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
    import checkPermission from '@/utils/permission'
    import initData from '@/mixins/initData'
    import {parseTime} from '@/utils/index'
    import {generatorCodeZip} from '@/api/code-tools'
    import {downloadFileFunction} from '@/api/downloadFile'
    import eForm from './generatorCode/form'
    import addNewTemplate from './generatorCode/addNewTemplate'
    import multiModelGenerator from './generatorCode/multiModelGenerator'

    export default {
        name: 'generatorCode',
        components: {eForm, addNewTemplate, multiModelGenerator},
        mixins: [initData],
        data() {
            return {
                query: {
                    value: '',
                    modelType: 'aidam'
                },
                exportDataLoading: false,
                configMessageLoading: false,
                multiModelGeneratorLoading: false,
                modelTypeOptions: [
                    {key: 'aidam', display_name: 'aidam'},
                    {key: 'codegenerator2', display_name: 'codegenerator2'},
                    {key: 'aidam-other', display_name: 'aidam-other'},
                    {key: 'springboot', display_name: 'springboot'},
                    {key: 'PersonalFinance', display_name: 'PersonalFinance'},
                    {key: 'other', display_name: 'other'}
                ]
            }
        },
        created() {
            this.$nextTick(() => {
                this.init();
            })
        },
        methods: {
            parseTime,
            checkPermission,
            beforeInit() {
                this.url = 'api/sys/generator/tableList';
                const sort = 'sort,asc';
                this.params = {page: this.page, size: this.size, sort: sort};
                const query = this.query;
                const value = query.value;
                if (value) {
                    this.params['tableName'] = value;
                }
                return true
            },
            generatorCode() {
                this.doGeneratorCode();
            },
            downloadGeneratorCodeData(tableName, modelType) {
                let generatorCodeParams = {
                    tableNames: tableName, modelType: modelType,
                };
                this.commonGeneratorCodeZip(generatorCodeParams, tableName + `.zip`);
            },

            doGeneratorCode() {
                this.exportDataLoading = true;
                const modelType = this.query.modelType;
                const data = this.$refs.table.selection;
                console.log(data.length);
                const idsTableNames = [];
                for (let i = 0; i < data.length; i++) {
                    idsTableNames.push(data[i].tableName);
                }
                let outputFileName = idsTableNames + `代码文件.zip`;
                let generatorCodeParams = {
                    tableNames: idsTableNames, 'modelType': modelType
                };
                console.log(generatorCodeParams);
                this.commonGeneratorCodeZip(generatorCodeParams, outputFileName);
                this.exportDataLoading = false;
            },
            doMultiModelGenerator() {
                this.multiModelGeneratorLoading = true;
                this.$refs.multiModelGenerator.dialog = true;
                const data = this.$refs.table.selection;
                const idsTableNames = [];
                for (let i = 0; i < data.length; i++) {
                    idsTableNames.push(data[i].tableName);
                }
                const tableNameList = idsTableNames.toString();
                this.$refs.multiModelGenerator.doQueryColumnInfoFromTableName(tableNameList);
                this.multiModelGeneratorLoading = false;

            },
            commonGeneratorCodeZip(generatorCodeParams, outputFileName) {
                console.log('aaa' + generatorCodeParams);
                generatorCodeZip(generatorCodeParams).then(res => {
                    this.exportDataLoading = false;
                    downloadFileFunction(res, outputFileName);
                    this.init();
                    this.$notify({
                        title: '下载成功',
                        type: 'success',
                        duration: 2500
                    })
                }).catch(err => {
                    this.exportDataLoading = false;
                    console.log(err.response.data.message)
                })
            },
            setConfigMessage() {
                this.$refs.form.dialog = true;
                const modelType = this.query.modelType;
                this.$refs.form.doQueryGeneratorCodeConfig({configType: modelType});
            },
            addNewTemplate() {
                this.$refs.addNewTemplateForm.dialog = true;
                const modelType = this.query.modelType;
                this.$refs.addNewTemplateForm.doTransmitVariable({modelType: modelType});
            }
        }
    }
</script>

<style scoped>

</style>
